<template>
	<view :data-theme="theme" class="container">
		<view class="header">
			<view class="card">
				<h2>退库信息</h2>
				<u--form labelPosition="left" style="margin: 0 20rpx;padding: 20rpx;" :model="formModel" :rules="rules"
					ref="uForm">
					<picker model="selector" @change="bindPickerChange" range-key="depotName" :value="index" :range="depotData">
						<u-form-item label="取货仓库" prop="productDetail.name" labelWidth="80" ref="item1" :required="true">
							<input v-model="formModel.depotName" disabled placeholder="请选择" @click="depotTypeShow = true"
								border="none"></input>
							<u-icon slot="right" name="arrow-right" @click="depotTypeShow = true"></u-icon>
						</u-form-item>
					</picker>
					
					<u-form-item label="商品类型" prop="productDetail.skuType" labelWidth="80" ref="item1" :required="true">
						<!-- <u-radio-group v-model="formModel.skuType">
							<u-radio :customStyle="{marginRight: '30px'}" v-for="(item, index) in radiolist1"
								:key="index" :label="item.name" :name="item.disabled">
							</u-radio>
						</u-radio-group> -->
						<radio-group style="display: flex;" v-model="formModel.skuType">
							<view style="display: flex;flex-direction: row;margin: 0 20rpx;"
								v-for="(item, index) in radiolist1" :key="index">
								<view>
									<radio :value="item.disabled" :checked="index === current" />
								</view>
								<view style="line-height: 19px;">{{item.name}}</view>
							</view>
						</radio-group>
					</u-form-item>
				</u--form>
			</view>
		</view>
		<view class="content" style="border-radius: 10rpx;background-color: #fff;margin: 20rpx;">
			<!-- 这里是可滚动的内容 -->
			<view class="scroll-view" scroll-y style="display: flex;">
				<view class="scroll-view-inner"> <!-- 内容区域 -->
					<h2>退库商品</h2>
					<view class="stockOrder" v-for="(ele,indexO) in addCancelData">
						<view class="businessStock">
							<u--image :showLoading="true" :src="ele.skuImage" width="80px" height="80px"
								class="top_left"></u--image>
							<view class="top_right" style="padding-left: 20rpx;">
								<view style="margin-bottom: 10rpx;" class="top_right_weight mb_10">
									[{{ele.brandName}}]{{ ele.productName }}</view>
								<view style="margin-bottom: 10rpx;" class="mb_10">商品规格：
									<span>{{ ele.skuName ? ele.skuName : '-' }}</span>
								</view>
								<view style="margin-bottom: 10rpx;" class="mb_10">申请退货数量：
									<span>×{{ ele.returnQuantity }}({{ele.skuUnit}})</span>
								</view>
							</view>
							<view style="width: 50px;">
								<button type="primary" @click="deleteAddCancel(indexO)">删除</button>
							</view>
						</view>
						<view style="margin:20rpx;border-bottom: 1px solid #f6f6f6"></view>
					</view>
				</view>
			</view>

			<view style="margin:0 20rpx 20rpx 20rpx;flex: 1;">
				<!-- <u-button type="primary" :color="bgColor" :plain="true" text="+ 添加退库商品"
					@click="goChooseProduct()"></u-button> -->
				<button :color="bgColor" class="plain_bgColor"
					style="font-weight: bold;border-radius: 10px;color: #FFF;padding: 20rpx;"
					@click="goChooseProduct()">+ 添加退库商品</button>
			</view>
		</view>
		<view class="footer">
			<view style="display: flex;flex: 1;margin-left: 20rpx;align-items: center;">退货商品合计 {{addCancelData.length}}</view>
			<view style="margin:0 20rpx 20rpx 20rpx;display: flex;align-items: center;">
				<!-- <u-button :color="bgColor" :disabled="!addCancelData.length" text="提交退库单" style="color: #fff;"
					@click="upAddCancel()"></u-button> -->
				<button :color="bgColor" class="bg_color" :disabled="!addCancelData.length"
					style="font-weight: bold;border-radius: 10px;color: #FFF;padding: 20rpx;"
					@click="upAddCancel()">提交退库单</button>
			</view>
		</view>

		<!-- 仓库名称 -->
		<!-- <u-picker :defaultIndex="invoiceTypeIndex" :show="depotTypeShow" :columns="depotData"
			:closeOnClickOverlay="true" @confirm="invoiceTypeConfirm" @close="depotTypeShow = false"
			@cancel="depotTypeShow = false" keyName="depotName">
		</u-picker> -->
		
	</view>
</template>

<script>
	import {
		saveCancelOrderAPi
	} from '@/api/cancelling.js';
	import {
		businessQueryGoodsAndDepotApi,
		queryDepotInformationApi
	} from '@/api/goodsAndDepot.js';
	import {
		getLabelApi
	} from '../../../api/labelPrinting';
	import {
		setThemeColor
	} from '../../../utils/setTheme';
	let app = getApp();
	export default {
		data() {
			return {
				bgColor: "#ffffff",
				theme: app.globalData.theme,
				formModel: {
					depotName: '',
					skuType: 1,
				},
				rules: {
					'formModel.depotName': {
						type: 'string',
						required: true,
						message: '请选择取货仓库',
						trigger: ['blur', 'change']
					},
				},
				//---
				depotTypeShow: false, //选择仓库下拉框
				invoiceTypeIndex: [0], //默认选择
				depotForm: {
					limit: 10,
					page: 1,
				}, // 查询仓库名称
				depotData: [], //仓库数据
				index:0,
				depotId: '', //所选仓库ID
				// ------
				radiolist1: [{
						name: '成品',
						disabled: '1'
					},
					{
						name: '包装物',
						disabled: '2'
					}
				],
				current: 0,
				// --------
				addCancelData: [], //添加的退库商品
			};
		},
		onLoad() {
			this.bgColor = setThemeColor();
			uni.setNavigationBarColor({
				frontColor: '#ffffff',
				backgroundColor: this.bgColor,
			});
			this.getDepotList();
		},
		methods: {
			// 获取城市 id
			getDepotList() {
				queryDepotInformationApi(this.depotForm).then((res) => {
					let depot = res.data.list
					let depotData = depot.map(obj => {
						const {
							createMemberName,
							depotAddress,
							depotTelephone,
							updatedMemberName,
							zoneId,
							...rest
						} = obj; //删除部分属性
						return rest
					}); //要删除的数据的数组
					// this.depotData.push(depotData);
					this.depotData = depotData
				})
			},
			// 仓库名称选择
			// invoiceTypeConfirm(item) {
			// 	let list = item.value[0].depotId;
			// 	this.depotId = list;
			// 	this.depotTypeShow = false;
			// 	this.formModel.depotId = list
			// 	this.formModel.depotName = item.value[0].depotName;
			// },
			
			// 仓库名称选择
			bindPickerChange: function(e) {
				// console.log('picker发送选择改变，携带值为', e)
				this.index = e.detail.value;
				let i = e.detail.value;
				let depotId = this.depotData[i].depotId;
				this.depotId = depotId;
				this.formModel.depotId = depotId;
				this.formModel.depotName = this.depotData[i].depotName;
			},
			goChooseProduct() {
				if (this.formModel.depotName == '') {
					uni.showToast({
						title: '请先选择仓库',
						icon: 'none', // 提示图标，可选值：'success', 'loading', 'none'
						duration: 2000 // 持续时间，单位为毫秒
					});
					return;
				};
				this.goPage(`/pages/cancellingStock/chooseSelectProduct/chooseSelectProduct?data=${this.depotId}`);
			},
			goPage(url) {
				uni.navigateTo({
					url
				})
			},
			otherFun(items) {
				this.addCancelData.push(...items);
				this.addCancelData = this.addCancelData.map(item => {
					return {
						brandName: item.brandName,
						depotName: this.formModel.depotName,
						productId: 1,
						productName: item.productName,
						returnQuantity: item.returnQuantity,
						skuId: item.skuId,
						skuImage: item.skuImage,
						skuName: item.skuName,
						skuUnit: item.skuUnit,
					}
				});
			},
			deleteAddCancel(indexO) {
				this.addCancelData.splice(indexO, 1) //使用splice 方法删除当前对象
			},
			// 提交退库单
			upAddCancel() {
				delete this.formModel.depotName;
				this.formModel.cancellingStocksTwoDTOList = this.addCancelData;
				saveCancelOrderAPi(this.formModel).then((res) => {
					if (res.code == 200) {
						uni.showToast({
							title: '提交成功',
							icon: 'success', // 提示图标，可选值：'success', 'loading', 'none'
							duration: 2000 // 持续时间，单位为毫秒
						});
						setTimeout(() => {
							const pages =
								getCurrentPages(); // 获取当前页面栈的实例，以数组形式按栈的顺序给出，第一个元素为首页，最后一个元素为当前页面。
							const prevPage = pages[pages.length - 2]; // 获取上一级页面对象
							uni.navigateBack({
								delta: 1,
							});
						}, 1000)
					}
				})
			},
		}
	}
</script>

<style lang="scss">
	.bg_color {
		@include main_bg_color(theme);
	}

	.plain_bgColor {
		@include main_color(theme);
		@include main_bg_rgba_color(theme, 0.05);
		border: 1rpx solid;
	}

	h1 {
		font-weight: bold;
		font-size: 20px;
		margin-bottom: 20px;
	}

	h2 {
		font-weight: bold;
		margin: 20px;
		padding-top: 20rpx;
	}

	.card {
		background-color: #fff;
		border-radius: 10rpx;
		margin: 20rpx;
	}

	page {
		height: 100%;
	}

	.container {
		display: flex;
		flex-direction: column;
		height: 100%;
	}

	.column {
		padding: 20rpx;
		display: flex;
		flex-flow: row;
		text-align: center;
		justify-content: space-between;

		.title {
			display: flex;
			// flex: 1;
			width: 150rpx;
		}

		.title-c {
			display: flex;
			flex: 1;
			justify-content: left;
			// padding-left: 20rpx;
		}
	}

	.businessStock {
		display: flex;
		flex-flow: row;
		padding: 20rpx;

		.top_right {
			margin-left: 20rpx;
		}
	}

	.top_right_weight {
		font-weight: bold;
	}


	.footer {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		background-color: #fff;
		padding: 20rpx 0;
		display: flex;
		justify-content: space-between;
		text-align: center;
		justify-items: center;
	}
</style>